<template>
  <div class="home">
    <div class="aaa">
      <div class="nav">
        <div class="nav-left">
          <img src="https://flowbite.com/docs/images/logo.svg" alt="" />
          <span>{{ name1 }}</span>
        </div>
        <div class="nav-center">
          <router-link to="/home/one" tag="div">首页</router-link>
          <router-link to="/home/two" tag="div">分类</router-link>
          <router-link to="/home/three" tag="div">标签</router-link>
          <router-link to="/home/four" tag="div">归档</router-link>
        </div>
        <div class="nav-right">
          <el-input v-model="input" placeholder="敬请期待..."
            ><i slot="prefix" class="el-input__icon el-icon-search"></i
          ></el-input>
          <el-button>登录</el-button>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="content">
        <router-view @back="fun" />
      </div>
      <div class="people">
        <div class="account">
          <div class="imgbox">
            <img :src="imgUrl" alt="" />
          </div>
          <span style="color: back; font-size: 18px; margin-top: 10px">{{
            name2
          }}</span>
          <span style="color: #777; margin-top: 5px">{{ introduction }}</span>
          <p class="ico">
            <el-tooltip
              class="item"
              effect="dark"
              content="我的？？？"
              placement="bottom"
            >
              <span></span>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="我的知乎"
              placement="bottom"
            >
              <span>知</span>
            </el-tooltip>
          </p>
        </div>
        <!-- 分类 -->
        <div class="tag" v-show="flag1">
          <el-table
            :data="tableData"
            style="width: 100%"
            @row-click="jumpTwo"
            size="medium"
          >
            <el-table-column label="分类" width="280">
              <template slot-scope="scope">
                <i class="el-icon-folder-opened"></i>
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
              <!-- <i class="el-icon-folder-opened"></i> -->
            </el-table-column>
          </el-table>
        </div>
        <!-- 标签 -->
        <div class="biaoqian" v-show="flag2">
          <h3>标签</h3>
          <el-tag v-for="item in tagList" :key="item.id" @click="jumpThree(item.id,item.name)">{{
            item.name
          }}</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag1: true,
      flag2: true,
      name1: "",
      name2: "",
      introduction: "",
      imgUrl: "",
      zhihuHome: "",
      input: "",
      tagList: [],
      tableData: [],
    };
  },
  created() {
    this.people();
    this.listName();
    this.tagPost();
  },
  methods: {
    fun(v) {
      this.flag1 = v[0];
      this.flag2 = v[1];
      console.log(v, "判断数组");
      console.log(this.flag1, "判断1");
      console.log(this.flag2, "判断2");
    },
    //跳转页面2的附页
    jumpTwo(a) {
      this.$router.push({
        name: "twoChild", //用params时此处只能用name跳转
        query: {
          list: a,
        },
      });
    },
    //跳转页面3的附页
    jumpThree(a, b) {
      this.$router.push({
        name: "threeChild", //用params时此处只能用name跳转
        query: {
          tagId: a,
          text: b,
        },
      });
    },
    //账号信息接口
    people() {
      this.$axios
        .post("http://47.104.167.34:9110/api/blog/setting/detail")
        .then((res) => {
          this.name1 = res.data.data.blogName;
          this.name2 = res.data.data.author;
          this.imgUrl = res.data.data.avatar;
          this.zhihuHome = res.data.data.zhihuHome;
          this.introduction = res.data.data.introduction;
        });
    },
    //分类接口
    listName() {
      this.$axios
        .post("http://47.104.167.34:9110/api/category/list")
        .then((res) => {
          this.tableData = res.data.data;
          // console.log(res, "3336666");
        });
    },
    //标签接口
    tagPost() {
      this.$axios.post("http://47.104.167.34:9110/api/tag/list").then((res) => {
        this.tagList = res.data.data;
        console.log(res, "11110000222");
      });
    },
  }, //methods结束处
};
</script>

<style scoped>
.aaa {
  width: 100%;
  background-color: white;
}
.nav {
  width: 1200px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background-color: white;
}
.nav-left {
  width: 200px;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.nav-left > img {
  margin-right: 20px;
}
.nav-center {
  width: 300px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* background-color: beige; */
}
.nav-right {
  width: 250px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-button {
  height: 40px;
  width: 60px;
  border: none;
}
.el-input {
  width: 70%;
}
.box {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.content {
  width: 70%;
}
.people {
  width: 28%;
}
.account {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
}
.imgbox {
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 8px 0px #b89595;
  overflow: hidden;
  background-color: black;
  border-radius: 50%;
}
.imgbox > img {
  width: 50px;
  height: 50px;
}
.ico {
  width: 50px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ico span {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: white;
  background-color: rgb(202, 202, 235);
}
.ico > span:nth-child(1) {
  border-radius: 50%;
}
.tag {
  margin-top: 10px;
}
>>> .has-gutter .cell {
  color: black;
  font-size: 18px;
}
/* .el-table_21_column_21:hover{
  color: blue;
} */
>>> .el-table__body {
  margin: 0 auto;
}
>>> .el-table__cell:hover {
  color: blue;
}
>>> .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border: none;
  padding: 5px 0;
}
.biaoqian {
  margin-top: 10px;
  padding: 5px;
  background-color: white;
}
.el-tag {
  margin: 10px 0 0 10px;
}
</style>